{{ define "title" }}{{ .Article.Title }}{{ end }}
{{ define "head" }}
    <meta name='description' content='{{ .Article.Desc }}'>
    <meta name='author' content='Mat Ryer + contributors'>
    <meta name='keywords' content='macos,menubar,xbar,bitbar'>
    <meta itemprop='image' content='{{ .Article.ImageURL }}'>
    <meta itemprop='name' content='{{ .Article.Title }}'>
    <meta itemprop='description' content='{{ .Article.Desc }}'>
    <meta name='twitter:card' content='summary_large_image'>
    <meta name='twitter:title' content='{{ .Article.Title }}'>
    <meta name='twitter:description' content='{{ .Article.Desc }}'>
    <meta name='twitter:image' content='{{ .Article.ImageURL }}'>
    <meta name='twitter:creator' content='matryer'>
    <meta property='og:title' content='{{ .Article.Title }}'>
    <meta property='og:description' content='{{ .Article.Desc }}'>
    <meta property='og:url' content='https://xbarapp.com/docs/{{ .Article.Path }}'>
    <meta property='og:site_name' content='xbar lets you put anything into your macOS menu bar'>
    <meta property='og:type' content='article'>
    <meta property='og:image' content='{{ .Article.ImageURL }}'>
    <link rel='apple-touch-icon' sizes='180x180' href='/public/img/xbar-2048.png'>
    <link rel='icon' type='image/png' sizes='32x32' href='/public/img/xbar-2048.png'>
    <link rel='shortcut icon' href='/public/img/xbar-2048.png'>
    <meta name='msapplication-TileColor' content='#0f0c29'>
    <meta name='msapplication-config' content='/public/browserconfig.xml'>
    <meta name='theme-color' content='#0f0c29'>
    <style>
        .article {
            color: #ddd;
        }
        .article a {
            text-decoration: underline;
            padding: 1px 4px;
            margin-left: -2px;
            margin-right: -2px;
        }
        .article a:hover {
            background-color: white;
            color: black;
            text-decoration: none;
            padding: 1px 4px;
            margin-left: -2px;
            margin-right: -2px;
        }
        .article img {
            box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
            max-width: 100%;
            display: block;
            margin-top: 30px;
            margin-bottom: 30px;
            border-radius: .10rem;
        }
        .article p {
            margin-top: 10px;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.75);
        }
        h1.title {
            font-weight: bold;
        }
        .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
            font-family: 'Bodoni Moda', serif;
            margin-top: 50px;
            margin-bottom: 20px;
            color: white;
        }
        .article h1 {
            font-size: 1.8rem;
        }
        .article h2 {
            font-size: 1.6rem;
        }
        .article h3 {
            font-size: 1.4rem;
        }
        .article ul {
            margin-top: 10px;
            margin-bottom: 30px;
            list-style-type: disc;
            margin-left: 20px;
        }
        .article ol {
            margin-top: 10px;
            margin-bottom: 30px;
            list-style-type: decimal;
            margin-left: 30px;
        }
        .article ul li {
            padding-left: 5px;
        }
        .article ol li {
            padding-left: 15px;
        }
        .article li {
            margin-bottom: 10px;
        }
        .article pre {
            padding: 20px;
            margin-bottom: 20px;
            font-size: 0.9em;
            background-color: rgba(0,0,0,0.25);
            border-radius: .5rem;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .article code {
            font-size: 0.8em;
            color: white;
        }
    </style>
{{ end }}
{{ define "body" }}
    <main>
        <div class='p-8 rounded-lg shadow-2xl w-full'>
            <div class='container mx-auto mt-4 text-white'>
                <div class='text-xl fancy-font opacity-50 mx-4 uppercase'>
                    {{ .Article.PublishTimeStr }}
                </div>
                <h1 class='text-4xl title fancy-font mx-4 mb-8 max-w-3xl'>
                    {{ .Article.Title }}
                </h1>
            </div>
        </div>
        <div class='shadow-2xl bg-black/25'>
            <div class='container mx-auto lg:flex lg:space-x-8'>
                <div class='article max-w-screen-md text-xl py-4 lg:py-12 pb-8 lg:pb-32 p-2'>
                    {{ .Article.HTML }}
                </div>
                <div class='py-4 lg:py-8 pb-32'>
                    <div class='bg-gray-900/25 rounded p-8 text-white'>
                        <h2 class='font-bold mb-4'>You might also like</h2>
                        {{ range .AllArticles }}
                            <p class='mb-3'>
                                <a 
                                    href='/docs/{{ .Path }}'
                                    class='hover:underline opacity-75'
                                >
                                    {{ .Title }}
                                </a>
                            </p>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
        {{ template "support" . }}
    </main>
{{ end }}
